<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=path %>/myoa/javascripts/jquery-1.11.0.min.js"></script>
  <script src="<%=path %>/myoa/scripts/layui/lay/modules/laydate.js"></script> 
 <script src="<%=path %>/myoa/scripts/layui/layui.js" charset="utf-8"></script>
 <script src="<%=path %>/myoa/scripts/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="<%=path %>/myoa/scripts/css/bootstrap.min.css" />
 <link rel="stylesheet" href="<%=path %>/myoa/scripts/layui/css/layui.css"  media="all">
<title>日程安排</title>
</head>
<body>
<div id="content">
<div><a href="#">个人事务</a>>个人设置</div>
	<table class="layui-table" style="width:600px">
<colgroup><col width="18%"></col><col width="32%"></col><col width="18%"></col><col width="32%"></col></colgroup>
	<tr>
		<th>姓名：</th>
		<td colspan="2"><span  id="real_name" >{{queryuser.real_name}}</span></td>
		<td colspan="2" rowspan="5" style="text-align: center;">
			<div v-if="picpath==''">
			  <img id="demo1" style="width:100%;height:230px" v-bind:src=queryuser.image>
			  <form id="fileform" enctype="multipart/form-data">
			  <input type="file"  style="display:none" name="pic" id="pic" v-on:change="fileupload()">
			  </form>
			</div> 
			<div v-else>
			    <img id="demo1" style="width:100%;height:230px" v-bind:src=picpath>
			 </div> 
		<button type="button" class="layui-btn" id="test1">更换照片</button>
		</td>
	</tr>
	<tr>
		<th>性别：</th>
		<td colspan="2"><span id="sex">{{queryuser.sex}}</span></td>
	</tr>
	<tr>
		<th>帐号：</th>
		<td colspan="2"><span id="user_name" >{{queryuser.user_name}}</span></td>
	</tr>
	<tr>
		<th>部门：</th>
		<td colspan="2"><span id="dept_id" >{{queryuser.deptname}}</span></td>
	</tr>
	<tr>
		<th>部门领导：</th>
		<td colspan="2"><span id="dept_id" >{{queryuser.deptmanager}}</span></td>
	</tr>
	<tr>
		<th>菜单角色：</th>
		<td><span id="role_id" >{{queryuser.userrole}}</span></td>
		<th>职称：</th>
		<td><span id="role_id" >{{queryuser.job}}</span></td>
	</tr>
	
	<tr>
		<th>手机：</th>
		<td><input type="text" id="mobile" style="width: 125px;" v-model="queryuser.phone"/></td>
		<th>短号：</th>
		<td><input type="text" id="shortCode" style="width: 125px;"/></td>
	</tr>
	
	<tr>
		<td colspan="4">
			<input type="button" id="address" style="width: 15%;" value="提交"/>
		</td>
	</tr>
</table>
</div>

</body>
<script src="<%=path %>/myoa/scripts/js/vue.js"></script>
<script type="text/javascript">

$(function(){

	var vm = new Vue({
	    el: "#content",
	    data: {
	     queryuser:[],
	     picpath:'',
	     
	    },
	    methods:{
	    	fileupload:function(){
	    		var formdata=new FormData($("#fileform")[0]);
				console.log(formdata)
				$.ajax({
					url:'<%=path %>/uploadimg',
					 type : 'post',
		      		 data : formdata,           
		      		 cache : false,           
		      		 processData : false, // 不处理发送的数据，因为data值是Formdata对象，不需要对数据做处理           
		      		 contentType : false, // 
					success:function(result){
						vm.picpath=result
					}
				})
	    	},
	    	queryUser:function(){
	    		$.ajax({
					url:'<%=path %>/queryUser',
					 type : 'post',
		      		 dataType : 'json',      
					success:function(result){
						console.log(result)
						vm.queryuser=result
					}
				})
	    	}
	    	
	    }
	});
	//页面加载查询用户信息
	vm.queryUser();
	$("#test1").click(function(){
		$("#pic").trigger("click");
	});
	
	});
	

</script>
</html>
